<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的运动框架 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.div1{width: 100px; height: 100px; position: absolute; top:160px; left:0px; background: green;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">javascript 简单的运动框架！</h2>
	<div class="wrap-main">
		<!--内容写这里-->
		<input type="button" id="btn1" value="运动">
		<div class="div1" id="div1"></div>
	</div>
</div>
<script>
	var timer = null;
	
	window.onload = function (){
		var oBtn1 = document.getElementById("btn1");
		oBtn1.onclick = function (){
			startMove(300)
		}
	}
	
	function startMove(iTarget){
		var oDiv1 = document.getElementById("div1");
		clearInterval(timer);
		
		timer = setInterval(function(){
			var iSpeed = (oDiv1.offsetLeft) > iTarget ? (-10) : 10;
			
			if ( oDiv1.offsetLeft == iTarget ){
				clearInterval(timer);
			}
			else{
				oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
			}
			
			console.log(iSpeed);
		},30)
	}
</script>
</body>
</html>
